<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>10中介者模式</title>
  </head>
  <body>
    <p>中介者模式 模式使网状的多对多关系变成了相对简单的一对多关系，</p>
    <br />

    选择颜色:
    <select id="colorSelect">
      <option value="">请选择</option>
      <option value="red">红色</option>
      <option value="blue">蓝色</option>
    </select>
    输入购买数量: <input type="text" id="numberInput" /> 您选择了颜色:
    <div id="colorInfo"></div>
    <br />
    您输入了数量:
    <div id="numberInfo"></div>
    <br />
    <button id="nextBtn" disabled="true">请选择手机颜色和购买数量</button>
    <script>
      // 中介者模式 是多对多关系变成多对一的关系
      // 下拉选择框 colorSelect、
      // memorySelect 和文本输入框 numberInput 发生了事件行为时，它们仅仅通知中介者它们被改变了，
      // 同时把自身当作参数传入中介者，以便中介者辨别是谁发生了改变。剩下的所有事情都交给中介
      // 者对象来完成，这样一来，无论是修改还是新增节点，都只需要改动中介者对象里的代码。
      const goods = {
        // 手机库存
        'red|32G': 3,
        'red|16G': 0,
        'blue|32G': 1,
        'blue|16G': 6,
      };

      // 中介者类
      const mediator = (function () {
        let colorSelect = document.getElementById('colorSelect'),
          memorySelect = document.getElementById('memorySelect'),
          numberInput = document.getElementById('numberInput'),
          colorInfo = document.getElementById('colorInfo'),
          memoryInfo = document.getElementById('memoryInfo'),
          numberInfo = document.getElementById('numberInfo'),
          nextBtn = document.getElementById('nextBtn');
        return {
          changed: function (objDom) {
            const color = colorSelect.value, // 颜色
              memory = memorySelect.value, // 内存
              number = numberInput.value, // 数量
              stock = goods[color + '|' + memory]; // 颜色和内存对应的手机库存数量
            if (objDom === colorSelect) {
              // 如果改变的是选择颜色下拉框
              colorInfo.innerHTML = color;
            } else if (objDom === memorySelect) {
              memoryInfo.innerHTML = memory;
            } else if (objDom === numberInput) {
              numberInfo.innerHTML = number;
            }
            if (!color) {
              nextBtn.disabled = true;
              nextBtn.innerHTML = '请选择手机颜色';
              return;
            }
            if (!memory) {
              nextBtn.disabled = true;
              nextBtn.innerHTML = '请选择内存大小';
              return;
            }
            if (((number - 0) | 0) !== number - 0) {
              // 输入购买数量是否为正整数
              nextBtn.disabled = true;
              nextBtn.innerHTML = '请输入正确的购买数量';
              return;
            }
            nextBtn.disabled = false;
            nextBtn.innerHTML = '放入购物车';
          },
        };
      })();

      // 事件函数：
      colorSelect.onchange = function () {
        mediator.changed(this);
      };
      memorySelect.onchange = function () {
        mediator.changed(this);
      };
      numberInput.oninput = function () {
        mediator.changed(this);
      };
    </script>
  </body>
</html>
